<template>
   <div class="pager-container">
       <a  class="con" v-show="current!=1" @click="handleClick(1)">首页</a>
       <a  class="con" v-show="current!=1" @click="handleClick(current-1)">&lt;上一页</a>

       <a  v-for="(item,i) in numbers" 
                  :key="i"
                  class="num"
                  @click="handleClick(item)"
                  :class="{active:current==item}">{{item}}</a>

       <a class="con" v-show="current!=totalPager" @click="handleClick(current+1)">下一页&gt;</a>
       <a class="con" v-show="current!=totalPager" @click="handleClick(totalPager)">尾页</a>
   </div>
</template>

<script>
export default {
 name:"Pager",
 props:{
     current:{
         type:Number,
         default:1
     },
     total:{
         type:Number,
         default:0
     },
     limit:{
         type:Number,
         default:10
     },
     visible:{
         type:Number,
         default:10
     }
 },
 computed:{
     totalPager(){
         return Math.ceil(this.total/this.limit);
     },
     minNum(){
         let min = this.current-(this.visible/2);
         min = min<1?1:min;
         return min;
     },
     maxNum(){
         let max = this.minNum +this.visible-1;
         max = max>this.totalPager?this.totalPager:max;
         return max;
     },
     numbers(){
         let arr = [];
         for(let i=this.minNum;i<=this.maxNum;i++){
             arr.push(i)
         }
         return arr;
     }
 },
 methods:{
     handleClick(newPage){
         this.$emit("changePager",newPage);
     }
 }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.pager-container{
  display:flex;
  margin:20px 0;
  justify-content: center;
  a{
    margin-left:12px;
    background-color: #fff;
    color:@link;
    border-radius: 6px;
    &:hover,&.active{
        font-weight: bold;
        color:#fff;
        background:@abg ;
    }

    &.num{
        width:36px;
        height:36px;
        text-align: center;
        line-height: 36px;
    }
    &.con{
        line-height: 36px;
        padding:0 10px;
    }
  }
}

</style>